<ion-view>
    <ion-header-bar class="bar bar-dark" align-title="center">
        <div class="buttons">
            <button ng-click="goBack()" class="button button-clear">
                <i class="icon ion-ios-arrow-thin-left"></i>
            </button>
        </div>
        <h1 class="title">{{ins_id_show}}({{ins_name}})</h1>
        <div class="buttons">
            <div>
                <button class="button" ng-click="btn.toggleCustom()">
                    {{btn.text}}
                </button>
            </div>
        </div>
    </ion-header-bar>
    <ion-content class="posdetail" scroll="false">
        <div class="chart button-bar">
            <button class="button button-small button-dark" ng-class="{checked: chart.type=='TODAY'}" ng-click="switchType('chart','TODAY')">当日</button>
            <button class="button button-small button-dark" ng-class="{checked: chart.type=='D1'}" ng-click="switchType('chart','D1')">日线</button>
            <button class="button button-small button-dark" ng-class="{checked: chart.type=='H1'}" ng-click="switchType('chart','H1')">小时</button>
            <button class="button button-small button-dark" ng-class="{checked: chart.type=='M5'}" ng-click="switchType('chart','M5')">5分钟</button>
            <button class="button button-small button-dark" ng-click="openPopover('setting')">设置</button>
        </div>
        <div class="chart container">
        </div>
        <div class="panel button-bar">
            <button class="button button-small button-dark" ng-class="{checked: panel.type=='info'}" ng-click="switchType('panel','info')">信息</button>
            <button class="button button-small button-dark" ng-class="{checked: panel.type=='discuss'}" ng-click="switchType('panel','discuss')">持仓</button>
            <button class="button button-small button-dark" ng-class="{checked: panel.type=='plan'}" ng-click="switchType('panel','plan')">委托</button>
            <button class="button button-small button-dark" ng-class="{checked: panel.type=='tools'}" ng-click="switchType('panel','tools')">交易</button>
        </div>
        <ion-scroll class="panel container" direction="y" style="width:100%;" has-bouncing='false'>
            <div class="panel-container info flex" ng-if="panel.type=='info'">
                <div class="frame" style="padding: 6px 0px 4px 20px;">
                    <div class="last_price"></div>
                    <div>
                        <span class="change"></span>
                        ( <span class="change_percent"></span> )
                    </div>
                </div>
                <div class="frame" style="padding: 8px 20px 4px 0px;">
                    <div class="row">
                        <div class="col col-50 text-right ">
                            <span class="ask_price1"></span>
                            &nbsp;/
                        </div>
                        <div class="col col-50 text-left">
                            &nbsp;
                            <span class="ask_volume1"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-50 text-right ">
                            <span class="bid_price1"></span>
                            &nbsp;/
                        </div>
                        <div class="col col-50 text-left">
                            &nbsp;
                            <span class="bid_volume1"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-10">昨收</div>
                    <div class="col col-23 pre_close"></div>
                    <div class="col col-10">成交</div>
                    <div class="col col-23 volume"></div>
                    <div class="col col-10">昨结</div>
                    <div class="col col-23 pre_settlement"></div>
                </div>
                <div class="row">
                    <div class="col col-10">今开</div>
                    <div class="col col-23 open"></div>
                    <div class="col col-10">持仓</div>
                    <div class="col col-23 open_interest"></div>
                    <div class="col col-10">涨停</div>
                    <div class="col col-23 upper_limit"></div>
                </div>
                <div class="row">
                    <div class="col col-10">最高</div>
                    <div class="col col-23 highest"></div>
                    <div class="col col-10">日增</div>
                    <div class="col col-23 day_increase"></div>
                    <div class="col col-10">跌停</div>
                    <div class="col col-23 lower_limit"></div>
                </div>
                <div class="row">
                    <div class="col col-10">最低</div>
                    <div class="col col-23 lowest"></div>
                    <div class="col col-10">乘数</div>
                    <div class="col col-23">{{insObj.volume_multiple}}</div>
                    <div class="col col-10">下市</div>
                    <div class="col col-23 expire_datetime"></div>
                </div>
                <div class="row" style="padding-top:10px">
                    <div class="col col-20">交易时间</div>
                    <div class="col col-80 trading_time"></div>
                </div>
            </div>
            <div class="panel-container discuss" ng-if="panel.type=='discuss'">
                <table style="width: 100%">
                    <thead>
                        <tr>
                            <th width="12%">合约</th>
                            <th width="8%">多空</th>
                            <th width="10%">手数</th>
                            <th width="20%">开仓均价</th>
                            <th width="20%">持仓盈亏</th>
                            <th width="30%">平仓</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
            <div class="panel-container plan" ng-if="panel.type=='plan'">
                <table style="width: 100%">
                    <thead>
                        <tr>
                            <th width="15%">合约</th>
                            <th width="20%">状态</th>
                            <th width="10%">开平</th>
                            <th width="15%">委托价</th>
                            <th width="15%">未成交</th>
                            <th width="15%">手数</th>
                            <th width="10%">时间</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="panel-container flex tools" ng-if="panel.type=='tools'">
                <div class="frame frame-left">
                    <div class="row">
                        <div class="col col-20" style="line-height: 32px;">价格</div>
                        <div class="col col-80">
                            <div class="price-input">
                                <div id="output-price" class="numeric-keyboard-input" numeric-keyboard-input
                                     type="price" ng-model="order.price" ng-bind="order.price"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-20" style="line-height: 32px;">手数</div>
                        <div class="col col-80">
                            <div class="price-input">
                                <div id="output-hands" class="numeric-keyboard-input" numeric-keyboard-input
                                     type="number" ng-model="order.volume" ng-bind="order.volume"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="frame frame-right">
                    <div class="row">
                        <div class="col col-20">卖</div>
                        <div class="col col-40 ask_price1"></div>
                        <div class="col col-40 ask_volume1"></div>
                    </div>
                    <div class="row">
                        <div class="col col-20">新</div>
                        <div class="col col-40 last_price"></div>
                        <div class="col col-40 volume"></div>
                    </div>
                    <div class="row">
                        <div class="col col-20">买</div>
                        <div class="col col-40 bid_price1"></div>
                        <div class="col col-40 bid_volume1"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col" style="padding:0 10px">
                        <button class="button button-block button-assertive" ng-click="insert_order('OPEN','BUY')">
                            <div>买多</div>
                        </button>
                    </div>
                    <div class="col" style="padding:0 10px">
                        <button class="button button-block button-balanced" ng-click="insert_order('OPEN','SELL')">
                            <div>卖空</div>
                        </button>
                    </div>
                    <div class="col" style="padding:0 10px">
                        <button class="button button-block button-light " ng-if="buy_close_avaliable" ng-click="insert_order('CLOSE', 'BUY')">
                            <div>买平</div>
                        </button>
                        <button class="button button-block button-light " ng-if="sell_close_avaliable" ng-click="insert_order('CLOSE', 'SELL')">
                            <div>卖平</div>
                        </button>
                    </div>
                </div>
            </div>
            </div>
        </ion-scroll>
        <numeric-keyboard on-open="open_cb()" on-close="close_cb()"></numeric-keyboard>
    </ion-content>
    <script type="text/ng-template" id='chart-popover.html'>
        <ion-popover-view>
            <ion-header-bar>
                <h1 class="title">设置</h1>
            </ion-header-bar>
            <ion-content>
                <ul class="list">
                    <li class="item item-toggle">显示持仓
                        <label class="toggle toggle-assertive">
                            <input type="checkbox" ng-model="setting.showPositions">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                        </label>
                    </li>
                    <li class="item item-toggle">显示挂单
                        <label class="toggle toggle-balance">
                            <input type="checkbox" ng-model="setting.showOrders">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                        </label>
                    </li>
                </ul>
            </ion-content>
        </ion-popover-view>
    </script>
    <script type="text/ng-template" id='other-pos-popover.html'>
        <ion-popover-view>
            <ion-header-bar>
                <h1 class="title">设置</h1>
            </ion-header-bar>
            <ion-content>
                <ul class="list">
                    <li class="item item-toggle">显示持仓
                        <label class="toggle toggle-assertive">
                    <input type="checkbox" ng-model="setting.showPositions">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
                    </li>
                    <li class="item item-toggle">显示挂单
                        <label class="toggle toggle-balance">
                    <input type="checkbox" ng-model="setting.showOrders">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
                    </li>
                </ul>
            </ion-content>
        </ion-popover-view>
    </script>
</ion-view>
